<template>
  <div v-if="result" class="start">
   <MusicBack :title="`${result.name}`" seach=''/>
     
    <div class="img" v-if="ress">
       <video
        :src="`${ress.url}`"
        controls="controls"
        :poster="`${result.cover}`"
      ></video>
    </div>
    <div class="name">
      <h1 align="center">MV:{{result.name  }}</h1>
      <h2>创作者：{{ result.artistName }}</h2>
      <div class="like" v-if="reg">
        <span><van-icon name="fire-o" tag="i" />下载次数： {{ reg.playCount }}
        </span>
        <span><van-icon name="share-o" tag="i" />分享次数 {{ reg.shareCount }}</span>
      </div>
    </div>
    <div class="tag" v-if="result&&result.videoGroup&&result.videoGroup.length > 0">
     
      <ul>
        <li v-for="(item,index) in result.videoGroup" :key="index">
          <div class="box">
            <span> {{ item.name }}</span>
          </div>
        </li>
      </ul>
    </div>

    <div v-if="comments.length == 0 ? false : true">
      <list-title>MV评论</list-title>
      <my-loading v-if="comments.length == 0"></my-loading>
      <ul v-else>
        <li v-for="index in comments.length" :key="index" class="list_li">
          <div class="img">
            <img :src="comments[index - 1].user.avatarUrl" />
          </div>
          <div class="center">
            <h2>{{ comments[index - 1].user.nickname }}</h2>
            <p>{{ comments[index - 1].content }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import MusicBack from "@/components/common/back.vue"
import ListTitle from "@/components/video/ListTitle.vue"
import MyLoading from "@/components/video/MyLoading.vue";
import { GETMVDETAILAPI, GETMVURLAPI, GETMVINFOAPI,GETMVCOMMENTAPI} from "@/api/api.js";
export default {
  
  name: "MV",
  props: {
    id: [String, Number],
  },
  data() {
    return {
      result: [],
      ress: [],
      reg: [],
      comments:[],
     
    }
  },
  components: {MusicBack, ListTitle, MyLoading},

mounted() {
    this.onLoad();
  },
  

  methods: {
     back() {
      this.$router.go("-1");
    },
    onLoad() {

      GETMVDETAILAPI({ mvid: `${this.id}` }).then((res) => {
     
          this.result = res.data.data;
          
      });
      GETMVURLAPI({ id: `${this.id}` }).then((res) => {
       
          this.ress = res.data.data;
        
       
      });
      GETMVINFOAPI({ mvid:`${this.id}`,r:720 }).then((res) => {
       
          this.reg = res.data.data;
        
      });
      GETMVCOMMENTAPI({ id:`${this.id}`}).then((res) => {
      
          this.comments= res.data.comments;
       
      });

    },
  },


}

</script>
<style scoped lang="less">
.back{width: 100%;
touch-action: none;
height: 50px;;}
.start {
  padding-bottom: 60px;
}
.list_li {
  display: flex;
  position: relative;
 margin: 0.9375rem ;
  border-bottom: #20d59b3b 1px solid;
  .img {
    width:40px;
    height: 40px;
    // background-color: cadetblue;
    // margin: 5px 6px;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .center {
    flex: 4;
    h2 {
      margin-left:  0.9375rem;
     text-align: left;
      color: black;
      line-height:40px ;
      height: 40px;
      opacity: 0.6;
    }
    p {
        margin-left:  0.9375rem;
      text-align: left;
      line-height: 15px;
      font-size: 12px;
      color: rgb(95, 95, 95);
    }
  }
  .up {
    flex: 1;
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 14px;
    color: #0fb053;
  }
}
.img {
  margin: 0 auto;
  padding-bottom: 10px;
  video {
    width: 100%;
  }
}
.name {
  h1 {
    font-size: 20px;
    padding: 5px 0;

    color: #0fb053;
  }
  h2 {
    padding: 5px 0;
  }
}

.like {
  padding: 5px 0;
  color: #0fb053;
  display: flex;
  font-size: 20px;
  justify-content: space-evenly;
  span{
    display: block;
    float: left;
    
  }
}
.tag {
  h1 {
    font-size: 20px;
    padding: 5px 0;
  }
  ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    li {
      padding: 5px;
      .box {
        padding: 2px 5px;
        background-color: white;
        border-radius: 10px;
        position: relative;
        border: 1px solid;
        border-color: rgb(223, 208, 208);
        span {
          width: 40px;
          text-align: center;
          color: #20d59b;
          border-radius: 10px;
          padding: 4px 12px;
        }
      }
    }
  }
}
</style>